<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>内置指令: v-on</title>
        <style>
            .wrapper { margin: 10px auto; text-align: center; }
            .counter { font-size: 5rem; }
            .buttons>* {
                display: inline-block;
                padding: 5px;
                border: 1px solid gray;
                margin: 5px;
                background: #dfdfdf;
            }
        </style>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first">
            <div>
                <div class="wrapper counter">{{counter}}</div>
                <div class="wrapper buttons">
                    <a href="http://www.kaifamiao.com" v-on:click.prevent="increase">增加</a>
                    <button v-on:click="increase">增加</button>
                    <button @click="decrease">减少</button>
                    <a href="http://www.kaifamiao.com" @click.prevent="decrease">减少</a>
                </div>
            </div>
        </div>

        <ul>
            <li>指令 `v-on` 用于绑定事件监听器</li>
            <li>可以在 `v-on` 之后通过指令参数来明确事件类型，比如 `v-on:click` 中的 `click` 就是指令参数</li>
            <li>可以将 `v-on:eventType` 简写为 `@eventType` (这是语法糖)</li>
            <li>可以在 `v-on` 中使用修饰符，比如 `prevent` 、`stop` 等</li>
        </ul>

        <a href="https://cn.vuejs.org/api/built-in-directives.html#v-on">Vue.js API: v-on指令</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    increase() {
                        console.log('increase');
                        this.counter++;
                    },
                    decrease(){
                        console.log('decrease');
                        this.counter--;
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>